---
import Netlify from './logos/netlify.svg';
import Webflow from './logos/webflow.svg';
import Mux from './logos/mux.svg';
import Cloudflare from './logos/cloudflare.svg';

const instanceId = Math.floor(Math.random() * 100_000);
---

<div dir="ltr" lang="en" class="sponsors">
	<h2 class="sponsors-title">{Astro.locals.t('leftSidebar.sponsoredBy')}</h2>
	<a
		href="https://www.netlify.com/?utm_campaign=Astro-2024&utm_source=astro-referral"
		aria-label="Netlify"
	>
		<Netlify width="96" aria-hidden="true" fill="currentColor" />
	</a>

	<a
		href="https://firebase.studio/?utm_source=astro&utm_medium=astro&utm_campaign=astro"
		aria-label="Firebase Studio"
	>
		{
			/* We need to inline this SVG to allow us to use unique IDs for the gradients because this
				 component is used multiple times per page */
		}
		<svg xmlns="http://www.w3.org/2000/svg" width="155" viewBox="0 0 322 65">
			<path
				fill="#FFC400"
				d="M31.39 24.27c.4.03.95.18 1.6.28l6.58 4.25-21.52 12.8a12.27 12.27 0 0 1-4.05.72l-8.27-9.85 17.35-6.74c1.77-.66 3.31-1 4.44-1.18 1.26-.21 2.5-.4 3.87-.27h-.01Z"
			></path>
			<path
				fill={`url(#fbs-gradient-a-${instanceId})`}
				d="M30.99 7.92a14.8 14.8 0 0 0-.5-1.73 12.76 12.76 0 0 0-3.02-4.9c-.34-.34-.8-.75-1.38-1.17a60.17 60.17 0 0 1-5.76 6.05C16.73 9.45 10.84 14 7.06 17.42c-.66.6-2 1.94-3.2 3.98v.01c-.22.38-.49.86-.77 1.44l-.13.28-.35.8a15.19 15.19 0 0 0-1.24 4.5 12.85 12.85 0 0 0 .27 4.19 13.5 13.5 0 0 0 4.46 7.05 12 12 0 0 0 7.9 2.65v-.02c-.14-.48-.3-1.17-.37-2.02a12.7 12.7 0 0 1 1.14-6.25c.36-.84 1.23-2.81 3.1-4.6.87-.84 1.81-1.52 2.75-2.13 1.01-.67 1.9-1.18 2.4-1.53.02-.01-.01 0 0 0l.07-.05a20.71 20.71 0 0 0 7.08-9.04c.21-.56.38-1.11.38-1.11.57-1.78 1.13-4.53.44-7.66Z"
			></path>
			<path
				fill="#FF9100"
				d="M14 42.33a12 12 0 0 1-7.9-2.66A13.29 13.29 0 0 1 1.5 32a13.32 13.32 0 0 1 1.1-8.06c.44-1.08.9-1.94 1.25-2.53a7.97 7.97 0 0 0 3.62 4.31c.37.24 2.1 1.35 4.71 1.93a14.13 14.13 0 0 0 10.89-1.92c-.5.36-1.44.9-2.46 1.57-.93.61-1.87 1.29-2.74 2.13a13.73 13.73 0 0 0-3.1 4.6 12.7 12.7 0 0 0-1.14 6.26c.07.86.23 1.56.36 2.03Z"
			></path>
			<path
				fill={`url(#fbs-gradient-b-${instanceId})`}
				d="M42.05 41.41a14.89 14.89 0 0 0 1.13-3.25 12.25 12.25 0 0 0 .12-4.58c-.53-2.89-2.74-5.23-2.97-5.47 0 0-1.5-1.54-3.7-2.6-.32-.16-.87-.43-1.65-.67a19.01 19.01 0 0 0-3.6-.58c.09.02.22.03.37.07.36.09.62.21.81.31.19.09.47.23.77.5a2.32 2.32 0 0 1 .81 1.26c.27 1.09-.4 2.11-.64 2.48-1.72 2.64-11.06 8.13-16.59 13.83a14.7 14.7 0 0 0-3.15 4.45 14.15 14.15 0 0 0-.93 8.17 14.38 14.38 0 0 0 5.76 8.8 96.15 96.15 0 0 1 6.88-6.97c4.49-4.08 10.33-8.6 10.33-8.6s4.49-3.63 6.24-7.15Z"
			></path>
			<path
				fill="currentColor"
				d="M60.04 17.72h17.5v4.3h-13v8.3h11.71v4.26h-11.7v11.95h-4.51v-28.8ZM82.4 23.2c-.82 0-1.54-.29-2.13-.85a2.98 2.98 0 0 1-.84-2.13c0-.84.28-1.53.84-2.1a2.9 2.9 0 0 1 2.14-.88c.83 0 1.53.3 2.09.88.59.57.88 1.26.88 2.1a2.94 2.94 0 0 1-2.98 2.97Zm-2.2 3.37h4.42v19.96h-4.43V26.57Zm8.52 0h4.19v2.98h.24A5.41 5.41 0 0 1 95.48 27a6.5 6.5 0 0 1 3.46-1.04 6 6 0 0 1 2.37.4V31a6.74 6.74 0 0 0-3.05-.69 4.7 4.7 0 0 0-3.66 1.7 5.94 5.94 0 0 0-1.45 4.06v10.46h-4.43V26.57Zm22.58 20.6c-1.96 0-3.73-.46-5.3-1.37a9.73 9.73 0 0 1-3.67-3.78 11.31 11.31 0 0 1-1.33-5.47c0-1.93.42-3.7 1.25-5.31a9.75 9.75 0 0 1 8.81-5.31c2.01 0 3.75.44 5.23 1.33a8.61 8.61 0 0 1 3.42 3.7 11.9 11.9 0 0 1 1.09 6.51h-15.37a5.8 5.8 0 0 0 1.97 4.23 6.08 6.08 0 0 0 4.02 1.49c2.3 0 4.08-1.08 5.31-3.22l3.78 1.8a10.45 10.45 0 0 1-3.7 3.95 10.17 10.17 0 0 1-5.5 1.45Zm5.07-13.08a4.86 4.86 0 0 0-.64-1.97 4.49 4.49 0 0 0-1.77-1.69 5.48 5.48 0 0 0-2.94-.72c-1.31 0-2.45.4-3.42 1.2a6.14 6.14 0 0 0-1.93 3.18h10.7Zm18 13.08a8 8 0 0 1-3.9-.93 6.5 6.5 0 0 1-2.53-2.33h-.24v2.62h-4.19v-28.8h4.43v8.64l-.24 2.78h.24a6.62 6.62 0 0 1 2.53-2.3 8.14 8.14 0 0 1 3.9-.92c1.72 0 3.3.45 4.75 1.37a9.66 9.66 0 0 1 3.5 3.82c.89 1.6 1.33 3.42 1.33 5.43s-.44 3.82-1.33 5.43a10.03 10.03 0 0 1-3.5 3.82 8.73 8.73 0 0 1-4.75 1.37Zm-.76-4.06a5.79 5.79 0 0 0 5.07-3.1c.56-1.02.84-2.17.84-3.46a6.8 6.8 0 0 0-.84-3.42 5.73 5.73 0 0 0-8-2.33c-.9.53-1.62 1.3-2.18 2.29-.54 1-.8 2.14-.8 3.46 0 1.31.26 2.47.8 3.46a5.7 5.7 0 0 0 5.1 3.1Zm19.73 4.06c-1.42 0-2.7-.28-3.86-.85a7.11 7.11 0 0 1-2.7-2.4 6.62 6.62 0 0 1-.96-3.55c0-2.1.78-3.74 2.33-4.95a9.6 9.6 0 0 1 6-1.8c2.12 0 3.93.35 5.43 1.08v-.85c0-1.2-.49-2.2-1.45-2.97a5.08 5.08 0 0 0-3.42-1.21c-2.04 0-3.67.83-4.9 2.5l-3.39-2.34a9.38 9.38 0 0 1 3.5-2.9c1.43-.67 3.02-1 4.79-1 2.92 0 5.18.74 6.76 2.21 1.6 1.45 2.41 3.5 2.41 6.16v12.23h-4.3v-2.46h-.24a7.92 7.92 0 0 1-2.46 2.25c-.99.57-2.17.85-3.54.85Zm.73-3.66c.99 0 1.9-.24 2.73-.73a5.68 5.68 0 0 0 2.01-1.97 5 5 0 0 0 .77-2.65 9.33 9.33 0 0 0-4.55-1.17 5.5 5.5 0 0 0-3.46.97 2.98 2.98 0 0 0-.16 4.7 4.3 4.3 0 0 0 2.66.85Zm20.44 3.66a9.7 9.7 0 0 1-5.67-1.57 8.8 8.8 0 0 1-3.14-4.02l3.95-1.7a5.31 5.31 0 0 0 1.97 2.5 5.3 5.3 0 0 0 2.9.85c1.1 0 2-.2 2.69-.6.7-.44 1.04-.99 1.04-1.66 0-.64-.28-1.16-.84-1.56a7.92 7.92 0 0 0-2.78-1.13l-2.73-.65a8.96 8.96 0 0 1-3.9-1.93 4.8 4.8 0 0 1-1.61-3.74c0-1.85.76-3.31 2.29-4.38a9.39 9.39 0 0 1 5.63-1.65c1.85 0 3.49.39 4.91 1.16 1.45.78 2.5 1.9 3.14 3.38l-3.9 1.65a3.75 3.75 0 0 0-1.74-1.85c-.77-.4-1.62-.6-2.53-.6-.88 0-1.66.2-2.33.6-.67.38-1 .89-1 1.53 0 .57.22 1.02.68 1.37.48.35 1.23.64 2.25.88l2.98.73c2 .5 3.5 1.29 4.5 2.33a5.1 5.1 0 0 1 1.49 3.7 5.2 5.2 0 0 1-1.09 3.22 7.1 7.1 0 0 1-2.93 2.3c-1.24.56-2.65.84-4.23.84Zm20.42 0c-1.96 0-3.73-.46-5.31-1.37a9.73 9.73 0 0 1-3.66-3.78 11.31 11.31 0 0 1-1.33-5.47c0-1.93.41-3.7 1.24-5.31a9.76 9.76 0 0 1 8.81-5.31 9.9 9.9 0 0 1 5.23 1.33 8.61 8.61 0 0 1 3.42 3.7 11.91 11.91 0 0 1 1.09 6.51h-15.37a5.8 5.8 0 0 0 1.97 4.23 6.08 6.08 0 0 0 4.03 1.49c2.3 0 4.07-1.08 5.3-3.22l3.79 1.8a10.45 10.45 0 0 1-3.7 3.95c-1.56.97-3.4 1.45-5.51 1.45Zm5.06-13.08a4.88 4.88 0 0 0-.64-1.97 4.5 4.5 0 0 0-1.77-1.69 5.48 5.48 0 0 0-2.94-.72c-1.31 0-2.45.4-3.41 1.2a6.13 6.13 0 0 0-1.94 3.18H200Zm24.71 13.08c-1.45 0-2.86-.3-4.23-.89a11.03 11.03 0 0 1-3.58-2.65 10.78 10.78 0 0 1-2.21-4.27l3.26-1.32a8.4 8.4 0 0 0 2.53 4.22 6.27 6.27 0 0 0 4.3 1.65 6.8 6.8 0 0 0 4.27-1.33 4.47 4.47 0 0 0 1.73-3.7c0-1.34-.5-2.44-1.49-3.3-.97-.88-2.56-1.7-4.79-2.45l-1.8-.64a14.42 14.42 0 0 1-5-2.86c-1.28-1.18-1.93-2.82-1.93-4.9a6.8 6.8 0 0 1 1.13-3.79 8.07 8.07 0 0 1 3.1-2.82 9.62 9.62 0 0 1 4.5-1.04c1.67 0 3.11.3 4.35.92a8.71 8.71 0 0 1 4.5 4.87l-3.17 1.37a5.55 5.55 0 0 0-5.6-3.9 5.9 5.9 0 0 0-3.78 1.24 3.85 3.85 0 0 0-1.57 3.14c0 1.13.45 2.05 1.33 2.78.89.7 2.23 1.35 4.02 1.97l1.85.64c2.45.89 4.35 2 5.72 3.34 1.4 1.32 2.09 3.11 2.09 5.4 0 1.84-.48 3.4-1.45 4.66a8.29 8.29 0 0 1-3.58 2.77c-1.45.6-2.95.89-4.5.89Zm19.63-.32c-.8 0-1.55-.14-2.25-.4a5.41 5.41 0 0 1-1.73-1.1 4.95 4.95 0 0 1-1.2-1.76 7.5 7.5 0 0 1-.37-2.46V29.67h-3.54v-3.1h3.54v-5.95h3.38v5.95h4.91v3.1h-4.9v10.62c0 1.13.22 1.96.68 2.5.45.58 1.15.88 2.09.88a4.1 4.1 0 0 0 2.17-.56v3.3a7.64 7.64 0 0 1-2.78.44Zm13.3.32c-2.47 0-4.35-.71-5.64-2.13-1.26-1.42-1.89-3.4-1.89-5.92V26.57h3.42v11.99c0 3.67 1.65 5.51 4.95 5.51 1.1 0 2.08-.3 2.94-.92a5.88 5.88 0 0 0 2-2.42c.5-.99.73-2.04.73-3.14V26.57h3.38v19.96h-3.22v-2.98h-.16a7.14 7.14 0 0 1-2.7 2.57 7.38 7.38 0 0 1-3.81 1.05Zm22.27 0c-1.71 0-3.3-.46-4.74-1.37a9.83 9.83 0 0 1-3.46-3.78 11.6 11.6 0 0 1-1.29-5.47c0-2.01.43-3.82 1.29-5.43a9.76 9.76 0 0 1 3.46-3.82 8.74 8.74 0 0 1 4.74-1.37c1.56 0 2.96.35 4.19 1.04a7.1 7.1 0 0 1 2.78 2.54h.16l-.16-2.74v-9.05h3.37v28.8h-3.21v-2.97h-.16a7.28 7.28 0 0 1-2.78 2.61c-1.23.67-2.63 1-4.19 1Zm.53-3.1a6.26 6.26 0 0 0 5.67-3.54c.62-1.15.93-2.48.93-3.98a8.1 8.1 0 0 0-.93-3.98 6.18 6.18 0 0 0-2.41-2.62 6.25 6.25 0 0 0-6.56 0 6.7 6.7 0 0 0-2.41 2.66 8.38 8.38 0 0 0-.89 3.94c0 1.5.3 2.83.89 3.98a6.9 6.9 0 0 0 2.41 2.62c1.02.61 2.12.92 3.3.92Zm16.04-21.68c-.67 0-1.24-.24-1.73-.73a2.36 2.36 0 0 1-.72-1.73c0-.67.24-1.24.72-1.73a2.36 2.36 0 0 1 1.73-.72c.67 0 1.25.24 1.73.72.49.49.73 1.06.73 1.73 0 .67-.24 1.25-.73 1.73-.45.49-1.03.73-1.73.73Zm-1.69 4.18h3.38v19.96h-3.38V26.57Zm16.77 20.6c-1.96 0-3.72-.46-5.27-1.37a10.03 10.03 0 0 1-3.66-3.82 11.51 11.51 0 0 1-1.29-5.43c0-1.99.43-3.78 1.29-5.4a10 10 0 0 1 8.93-5.23 10 10 0 0 1 8.93 5.24 11 11 0 0 1 1.33 5.39c0 1.98-.44 3.8-1.33 5.43a9.65 9.65 0 0 1-3.66 3.82 10.23 10.23 0 0 1-5.27 1.37Zm0-3.1a6.69 6.69 0 0 0 5.87-3.54c.65-1.15.97-2.48.97-3.98a7.8 7.8 0 0 0-.97-3.94 6.62 6.62 0 0 0-5.87-3.58c-1.18 0-2.3.3-3.34.92a6.9 6.9 0 0 0-2.53 2.66 8.08 8.08 0 0 0-.93 3.94c0 1.5.3 2.83.93 3.98.64 1.13 1.48 2 2.53 2.62 1.05.61 2.16.92 3.34.92Z"
			></path>
			<defs>
				<linearGradient
					id={`fbs-gradient-a-${instanceId}`}
					x1="5"
					x2="26.68"
					y1="37.44"
					y2=".98"
					gradientUnits="userSpaceOnUse"
				>
					<stop stop-color="#F8682F"></stop>
					<stop offset="1" stop-color="#DD2C00"></stop>
				</linearGradient>
				<linearGradient
					id={`fbs-gradient-b-${instanceId}`}
					x1="25.29"
					x2="22.81"
					y1="27.27"
					y2="70.76"
					gradientUnits="userSpaceOnUse"
				>
					<stop stop-color="#F8682F"></stop>
					<stop offset=".57" stop-color="#E92A4E"></stop>
					<stop offset="1" stop-color="#C447FF"></stop>
				</linearGradient>
			</defs>
		</svg>
	</a>

	<a
		href="https://webflow.com/feature/cloud?utm_source=Astro&utm_medium=tech-partner&utm_campaign=fy26-astro&utm_content=fy26-docs"
		aria-label="Webflow"
	>
		<Webflow width="110" aria-hidden="true" />
	</a>

	<a
		href="https://www.cloudflare.com/?utm_source=astro&utm_medium=astro&utm_campaign=astro"
		aria-label="Cloudflare"
	>
		<Cloudflare style="margin: -5% 0 5%" width="120" aria-hidden="true" />
	</a>

	{/* Spacer element to push following logos onto a new row. */}
	<div style="flex-basis: 100%"></div>

	<a href="https://www.mux.com/?utm_campaign=21819274-Astro&utm_source=astro" aria-label="Mux">
		<Mux height="15" fill="currentColor" aria-hidden="true" />
	</a>
</div>

<style>
	.sponsors {
		display: flex;
		flex-wrap: wrap;
		gap: 0 1.5rem;
		padding: 1.5rem 0.5rem 0.75rem;
	}
	a {
		display: flex;
		align-items: center;
		min-height: 3rem;
		opacity: 0.75;
	}
	a:hover {
		opacity: 1;
	}
	svg {
		color: var(--sl-color-white);
		fill: currentColor;
	}

	.sponsors-title {
		width: 100%;
		color: var(--sl-color-gray-3);
		font-size: var(--sl-text-xs);
		font-weight: 400;
		font-family: var(--__sl-font-mono);
		line-height: var(--sl-line-height-headings);
		margin: 0 0 0.5rem;
	}
</style>
